import React, { useEffect, useState } from 'react';
import { Box, Flex, Image, Text } from '@chakra-ui/react';

import person_team_1 from '@/assets/img/person_team_1.png';
import person_team_2 from '@/assets/img/person_team_2.png';
import person_team_3 from '@/assets/img/person_team_3.png';
import person_team_4 from '@/assets/img/person_team_4.png';
import person_team_top from '@/assets/img/person_team_top.png';
import person_tip from '@/assets/img/person_tip.png';
import person_bg from '@/assets/img/person_bg.png';
import product_4 from '@/assets/img/product_4.png';
import goRight from '@/assets/img/go.png';
import person_ustd from '@/assets/img/person_ustd.png';
import person_BND from '@/assets/img/person_BND.png';
import person_bg1 from '@/assets/img/person_bg1.png';
import person_bg2 from '@/assets/img/person_bg2.png';
import person_bg2_1 from '@/assets/img/person_bg2_1.png';

import product_explain from '@/assets/img/product_explain.png';
import { Button, message, Modal } from 'antd';
import MyModal from '@/components/MyModal';
import { useRouter } from 'next/router';
import { queryPerson, queryShareAddress } from '@/services/person';
import { useAccount, useConnect, useEnsName } from 'wagmi';
import { InjectedConnector } from 'wagmi/connectors/injected';
import { connect, useDispatch } from 'react-redux';
import { useTranslation } from 'react-i18next';
import { toMillimeter } from '@/utils/utils';

const Person = ({ walletAddress, }: any) => {
  const [addressModal, setAddressModal] = useState(false); // 推荐地址的弹窗
  const router = useRouter();
  const [personInfo, setPersonInfo] = useState({} as PersonInfo)
  const [udstList, setUdstList] = useState({} as WalletList)
  const [bndtList, setBndList] = useState({} as WalletList)
  const [addressList, setAddressList] = useState([] as ShareAddress[]) // 获取推荐地址
  const { address, isConnected } = useAccount();

  const { t } = useTranslation();
  const dispatch = useDispatch()

  useEffect(() => {
    queryPerson({ address: address }).then((res: ApiRes) => {
      const data = res.data as PersonInfo
      if (res.code === 0) {
        setPersonInfo(data)
        //赋值udst和bnd的列表
        data.walletList.map(item => {
          if (item.type === 1) {
            setUdstList(item)
          }
          if (item.type === 2) {
            setBndList(item)
          }
        })

      } else {
        message.error(res.msg)
      }
    })

    // 获取推荐地址
    queryShareAddress({ address: address }).then((res: ApiRes) => {
      const data = res.data as ShareList
      setAddressList(data.list)
    })
  }, []);


  const currentMoney = [
    { id: udstList.id, name: 'USDT', icon: person_ustd.src, current: udstList.amount, all: udstList.balance },
    { id: bndtList.id, name: 'BND', icon: person_BND.src, current: bndtList.amount, all: bndtList.balance },
  ];


  //推荐地址
  const showAddress = () => {
    setAddressModal(true);
  };

  // 关闭推荐地址
  const hideAddressModal = () => {
    setAddressModal(false);
  };

  // 获取首页数据
  useEffect(() => {
    queryPerson({ address: address });
  }, []);

  //更新地址
  useEffect(() => {
    if (address) {
      dispatch({ type: 'ADDRESS', payload: address })
    }
  }, [address])

  return (
    <Box w={'100%'}>
      <Box p={'40px 20px 50px'} w={'100%'} boxSizing="border-box">
        {/* 等级 / 我的推荐 */}
        <Flex w={'100%'} h={75} bgImage={person_bg.src} bgSize={'100% 100%'} justify={'space-between'}>
          <Flex>
            <Image src={product_4.src} w={80} h={70} mt={-10} ml={15} alt="LV"></Image>
            <Text color={'#FFFFFF'} fontSize={18} fontWeight={700} m={0} lineHeight={'36px'} mr={30} mt={15} ml={15}>
              V{personInfo.level}
            </Text>
          </Flex>
          <Flex align={'center'} mr={20}>
            <Flex w={120} h={36} bgImg={person_bg2.src} borderRadius={45} bgSize={'100%'} align="center" onClick={showAddress}>
              <Text color={'#FFFFFF'} fontSize={12} m={'0px 20px'} mr={13} lineHeight={'36px'}>
                {t('person.My_share')}
              </Text>
              <Image src={person_bg2_1.src} w={28} h={28} ml={'5px'} alt="LV"></Image>
            </Flex>
          </Flex>
        </Flex>

        {/* 我的资产 */}
        <Box borderRadius={4} bgColor={'white'} mt={14}>
          <Box p={'20px 16px 20px'} bgImg={person_bg1.src} bgSize={'100% 100%'}>
            <Text fontSize={18} m={0} color={'white'} lineHeight={'27px'}>
              {t('person.My_assets')}
            </Text>
            <Text fontSize={24} color={'white'} fontWeight={700} m={'6px 0'} lineHeight={'36px'} align={'center'}>
              $ {toMillimeter(personInfo.totalAmount)}
            </Text>
          </Box>
        </Box>

        {/* 资产类型 */}
        <Box>
          {currentMoney &&
            currentMoney.map((item) => (
              <Flex
                key={item.name}
                borderRadius={4}
                bgColor={'white'}
                mt={14}
                justify={'space-between'}
                align={'center'}
                p={'17px 16px 14px'}
                onClick={() => {
                  router.push({ pathname: '/person/detail', query: { id: item.id, name: item.name } });
                }}
              >
                <Flex>
                  <Image src={item.icon} w={30} h={30} alt="money_item"></Image>
                  <Text fontSize={18} m={0} lineHeight={'27px'} ml={8}>
                    {item.name}
                  </Text>
                </Flex>
                <Flex align={'center'}>
                  <Box>
                    <Text fontSize={18} m={0} lineHeight={'27px'} fontWeight={700}>
                      {toMillimeter(item.current)}
                    </Text>
                    <Text fontSize={12} m={0} lineHeight={'18px'} align={'right'}>
                      {/* $ {item.all} */}
                      $ {toMillimeter(item.all)}
                    </Text>
                  </Box>
                  <Image src={goRight.src} w={8} h={13} ml={8} alt="go_right"></Image>
                </Flex>
              </Flex>
            ))}
        </Box>

        {/* 团队数据 */}
        <Box borderRadius={4} bgColor={'white'} p={'20px 16px 20px'} mt={14}>

          {/* column1 */}
          <Flex justify={'space-between'}>
            <Text fontSize={18} m={0} lineHeight={'27px'} fontWeight={'500'}>
              {t('person.My_team_data')}
            </Text>
          </Flex>

          {/* 我的全网业绩 */}
          <Box mt={15}>
            <Flex align={'center'}>
              <Image src={person_team_top.src} w={18} h={18} alt="team_icon"></Image>
              <Text fontSize={12} m={0} lineHeight={'18px'} color={'#8C8C8C'} ml={6}>
                {t('person.My_all_data')}
              </Text>
            </Flex>
            <Text fontSize={24} m={0} mt={8} lineHeight={'36px'} fontWeight={700}>
              $ {toMillimeter(personInfo.teamTotalAmount)}
            </Text>
          </Box>
          {/* column2 */}
          <Flex justify={'space-between'} m={'22px 0'}>

            {/* 小区业绩 */}
            <Box>
              <Flex align={'center'}>
                <Image src={person_team_1.src} w={12} h={12} alt="team_icon"></Image>
                <Text fontSize={12} m={0} lineHeight={'18px'} color={'#8C8C8C'} ml={4}>
                  {t('person.small_team')}
                </Text>
              </Flex>
              <Text fontSize={16} lineHeight={'24px'} m={0} fontWeight={700} mt={6}>
                $ {toMillimeter(personInfo.areaTotalAmount)}
              </Text>
            </Box>
            {/* 小区留存业绩 */}
            <Box>
              <Flex align={'center'}>
                <Image src={person_team_2.src} w={12} h={12} alt="team_icon"></Image>
                <Text fontSize={12} m={0} lineHeight={'18px'} color={'#8C8C8C'} ml={6}>
                  {t('person.small_team_retention')}
                </Text>
              </Flex>
              <Text fontSize={16} lineHeight={'24px'} m={0} fontWeight={700} align="right" mt={6}>
                $ {toMillimeter(personInfo.areaRestAmount)}
              </Text>
            </Box>
          </Flex>
          {/* column3 */}
          <Flex justify={'space-between'}>
            {/* 小区人数 */}
            <Box>
              <Flex align={'center'}>
                <Image src={person_team_3.src} w={12} h={12} alt="team_icon"></Image>
                <Text fontSize={12} m={0} lineHeight={'18px'} color={'#8C8C8C'} ml={4}>
                  {t('person.small_team_size')}
                </Text>
              </Flex>
              <Text fontSize={16} lineHeight={'24px'} m={0} fontWeight={700} mt={4}>
                {toMillimeter(personInfo.areaNum)}
              </Text>
            </Box>
            {/* 直推人数 */}
            <Box>
              <Flex align={'center'}>
                <Image src={person_team_4.src} w={12} h={12} alt="team_icon"></Image>
                <Text fontSize={12} m={0} lineHeight={'18px'} color={'#8C8C8C'} ml={4}>
                  {t('person.Number_of_shares')}
                </Text>
              </Flex>
              <Text fontSize={16} lineHeight={'24px'} m={0} fontWeight={700} align="right" mt={4}>
                {toMillimeter(personInfo.shareNum)}
              </Text>
            </Box>
          </Flex>
        </Box>

        {/* 等级说明 */}
        <Box>
          <Flex align="center">
            <Image src={person_tip.src} w={22} h={22} alt="tip_icon"></Image>
            <Text lineHeight={'27px'} fontSize={18} color="#40414D" ml={8}>
              {t('person.Grade_Description')}
            </Text>
          </Flex>
          <Box>
            <Text fontSize={12} lineHeight={'20px'} m={0} mb={'4px'}>
              {t('person.Grade_Description_1')}
            </Text>
            <Text fontSize={12} lineHeight={'20px'} m={0} mb={'4px'}>
              {t('person.Grade_Description_2')}
            </Text>
            <Text fontSize={12} lineHeight={'20px'} m={0} mb={'4px'}>
              {t('person.Grade_Description_3')}
            </Text>
            <Text fontSize={12} lineHeight={'20px'} m={0} mb={'4px'}>
              {t('person.Grade_Description_4')}
            </Text>
            <Text fontSize={12} lineHeight={'20px'} m={0} mb={'4px'}>
              {t('person.Grade_Description_5')}
            </Text>
            <Text fontSize={12} lineHeight={'20px'} m={0} mb={'4px'}>
              {t('person.Grade_Description_6')}
            </Text>
          </Box>
        </Box>

        {addressModal && (
          <Modal title={<Box fontSize={18}>{t('modal.Share_address')}</Box>} footer={null} onCancel={hideAddressModal} open={addressModal}>
            <Box minH={200}>
              {addressList &&
                addressList.map((item, index) => (
                  <Box m={'20px 0px'} key={index}>
                    <Text m={0} fontSize={14} lineHeight={'18px'} color={'#000000'}>
                      {item.address}
                    </Text>
                    <Text m={0} mt={4} fontSize={10} lineHeight={'15px'} color={'#8C8C8C'}>
                      {new Date(item.createTime).toLocaleString()}
                    </Text>
                  </Box>
                ))}
            </Box>
          </Modal>
        )}
      </Box>
    </Box>

  );
};

export default connect(({ walletAddress }) => ({ walletAddress }))(Person);
